<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
	<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
	<link rel="stylesheet" href="./css/veetouch.css" /> 
	<link rel="stylesheet" href="./css/jquery.mobile.structure-1.0.css" />
	<script src="./js/jquery-1.7.1.min.js"></script>
	<script src="./js/jquery.mobile-1.0.min.js"></script>

<script type="text/javascript">

	$( function() {
		
		$('#searchButton').click(function() {
		
		    function reachableCallback(reachability) {
    			// There is no consistency on the format of reachability
    			var networkState = reachability.code || reachability;

    			var states = {};
    			states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
    			states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
    			states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';

    			alert('Connection type: ' + states[networkState]);
			}

			navigator.network.isReachable('phonegap.com', reachableCallback);
  			
  			
  			$.getJSON('http://api.alternativeto.net/software/'+$('#searchBox').val()+'/?count=15', 
  			function(data) {
  			    
  			    var items=data.Items;
  			    var list = $('#list');
  			    list.html("");
  				$.each(items, function(key, val) {
  				    
    				list.append(
      				  $(document.createElement('li')).html(val.Name)
    				);
  				});
  				
  				
  				list.listview("destroy").listview();
			});
  			
		});

  	    document.addEventListener("deviceready", onDeviceReady, false);

	} );
	

    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {
        
    }

</script>  

</head>
<body>

    <div data-role="page" id="home"> 
 
  <div data-role="header"> 
    <h1>AlternativeTo Home</h1> 
  </div> 
 
  <div data-role="content">
    <p>Find Alternatives To Your favourite Softwares </p>
    <p><a href="#search" data-role="button">Search Alternatives</a></p>    
    <p><a href="#recent" data-role="button">Recent Alternatives</a></p>
  </div> 
 
</div> 
 
<div data-role="page" id="search"> 
 
  <div data-role="header" data-position="fixed"> 
    <h1>Search Alternatives</h1> 
    <div class="ui-body ui-body-b"> 
     
         <input type="text" name="search" id="searchBox" value="" data-theme="a" /> 
         <button type="submit" data-theme="a" id="searchButton">Search</button>     
      
    </div>  
  </div> 
 
  <div data-role="content"> 
     
     <ul data-role="listview" id="list"> 
      
    </ul> 
      
        
    
  </div> 
 
</div>

<div data-role="page" id="recent"> 
 
  <div data-role="header"> 
    <h1> Recent Alternatives</h1> 
  </div> 
 
  <div data-role="content"> 
    <p>This app rocks!</p> 
     
  </div> 
 
</div> 
 
</body>
</html>